<template>
  <div class="app">
    <!-- 导航栏 -->
    <header class="header">
      <nav class="nav-container">
        <div class="logo">
          <span class="logo-text">
            <img
              src="./assets/imgs/finance 1.png "
              alt=""
              width="40px"
              height="40px"
            />
            数融金链</span
          >
        </div>
        <div class="nav-links">
          <a href="#" class="nav-link">首页</a>
          <a href="#" class="nav-link">产品介绍</a>
          <a href="#" class="nav-link">解决方案</a>
          <a href="#" class="nav-link">合作案例</a>
          <a href="#" class="nav-link">关于我们</a>
        </div>
        <div class="nav-actions">
          <el-button type="text" class="contact-btn login-btn">登录</el-button>
          <el-button type="primary" class="contact-btn register-btn"
            >免费注册</el-button
          >
          <!-- <el-button type="primary" plain class="contact-btn share-btn" @click="handleShare">分享</el-button> -->
        </div>
      </nav>
    </header>

    <section class="hero">
      <div class="hero-bg">
        <div class="hero-content">
          <h1 class="hero-title">电商应收账款金融服务平台</h1>
          <p class="hero-subtitle">
            科技金融赋能数智化电商金融新生态引领产业升级新范式
          </p>
        </div>
      </div>
    </section>

    <section class="services">
      <div class="section-title">
        <h2>稳定、安全、高性能的金融服务</h2>
        <p>
          致力于向核心企业和金融机构提供世界领先的供应链金融科技解决方案，<br />同时为中小企业提供卓越的用户体验。
        </p>
      </div>

      <div class="service-cards">
        <div class="service-card">
          <div class="card-header">
            <h3>
              <img
                src="./assets/imgs/soundcloud-line.png "
                alt=""
                width="24"
                height="24"
              />
              数据赋能：穿透式经营数据洞察
            </h3>
          </div>
          <p class="card-desc">
            全平台数据直连7大平台API
            <br />AI智能风控体系效率提升，单户尽调成本下降95%<br />
            建立电商专属模型，精准识别高风险商家
          </p>
        </div>
        <div class="service-item debris1">
          <div class="service-svg">
            <img src="./assets/imgs/safe-line.png " alt="" />
          </div>
          <p>资金监管</p>
        </div>
        <div class="service-item debris2">
          <div class="service-svg">
            <img src="./assets/imgs/shield-check-line.png " alt="" />
          </div>
          <p>风险控制</p>
        </div>
        <div class="service-item debris3">
          <div class="service-svg">
            <img src="./assets/imgs/user-community-line.png " alt="" />
          </div>
          <p>合规运营</p>
        </div>
      </div>
    </section>

    <section class="cooperation">
      <div class="coop-content">
        <h2 class="coop-title">三方合作架构与收益模型，助力"双循环"经济格局</h2>
        <div class="sub-title">
          构建"数据融通、风险可控、多方共赢"的数智化科技金融新生态
        </div>
        <div class="cooperation-role-container">
          <!-- 左侧导航/标题区域 -->
          <div class="left-panel">
            <div class="tabBox">
              <div class="title-section">
                <div>合作角色分工</div>
              </div>
              <div class="menu-section">
                <div class="menu-item active">收益结构设计</div>
                <div class="menu-item">效率对比 量化成果显著</div>
              </div>
            </div>
          </div>

          <!-- 右侧内容区域 -->
          <div class="right-panel">
            <div class="content-row">
              <div class="content-cell category-cell">
                <span>合作方</span>
              </div>
              <div class="content-cell role-cell">
                <div class="role-icon bank-icon"></div>
                <span>银行/保理公司</span>
              </div>
              <div class="content-cell role-cell">
                <div class="role-icon platform-icon"></div>
                <span>平台方</span>
              </div>
              <div class="content-cell role-cell">
                <div class="role-icon merchant-icon"></div>
                <span>商家</span>
              </div>
            </div>

            <!-- 核心职责行 -->
            <div class="content-row">
              <div class="content-cell category-cell">
                <span>核心职责</span>
              </div>
              <div class="content-cell">
                <p>资金提供（首付1-2亿元）</p>
              </div>
              <div class="content-cell">
                <p>数据架构+风控+</p>
                <p>备户筛选+担保</p>
              </div>
              <div class="content-cell">
                <p>数据授权+资金用户绑定</p>
              </div>
            </div>

            <!-- 核心优势行 -->
            <div class="content-row">
              <div class="content-cell category-cell">
                <span>核心优势</span>
              </div>
              <div class="content-cell">
                <p>低成本资金（年化<4%）</p>
                <p>政策资源整合</p>
              </div>
              <div class="content-cell">
                <p>电商全链路数据与</p>
                <p>AI风控模型，</p>
                <p>20万+商家储备</p>
              </div>
              <div class="content-cell">
                <p>应收账款质押融资</p>
                <p>（年化低至6%-8%）</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 行业案例数据 -->
    <section class="cases">
      <div class="section-title">
        <h2>行业案例，覆盖全球</h2>
        <p>致力于向核心企业和金融机构提供世界领先的供应链金融科技解决方案。</p>
      </div>
      <div class="stats-grid">
        <div class="stat-item">
          <div class="stat-number">2,156</div>
          <div class="stat-label">服务核心企业数</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">377</div>
          <div class="stat-label">服务金融机构数</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">330,000+</div>
          <div class="stat-label">服务中小微企业数</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">
            27
            <span class="small"> 个国家 </span>
          </div>
          <div class="stat-label">海外业务迅速扩张</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">48%</div>
          <div class="stat-label">市场占有率</div>
        </div>
      </div>
      <div class="world-map"></div>
    </section>

    <!-- 客户评价 -->
    <section class="testimonials">
      <div class="section-title">
        <h2>海量客户，共创辉煌</h2>
        <p>为中小企业提供卓越的用户体验。</p>
      </div>
      <!-- <div class="testimonial-cards">
        <div class="testimonial-card">
          <p class="testimonial-text">
            "数融金链的智能风控系统帮助我们有效降低了30%的信用风险，大大提升了业务效率。"
          </p>
          <p class="testimonial-author">— 某银行风控总监</p>
        </div>
        <div class="testimonial-card">
          <p class="testimonial-text">
            "数据分析引擎为我们提供了精准的市场洞察，让决策更加科学高效。"
          </p>
          <p class="testimonial-author">— 某金融科技公司CEO</p>
        </div>
        <div class="testimonial-card">
          <p class="testimonial-text">
            "实时监控预警系统让我们能够及时应对各类风险事件，保障了业务的稳定运行。"
          </p>
          <p class="testimonial-author">— 某企业财务总监</p>
        </div>
      </div> -->

      <div class="testimonials-section">
        <el-carousel
          :interval="4000"
          height="180px"
          :indicator-position="false"
          indicator-position="none"
          arrow="always"
          :autoplay="true"
          class="custom-carousel"
        >
          <el-carousel-item v-for="item in testimonials" :key="item.id">
            <div class="cards-container">
              <div
                v-for="card in getVisibleCards(item.id)"
                :key="card.id"
                class="testimonial-card"
              >
                <div class="quote-icon">"</div>
                <p class="content">{{ card.content }}</p>
                <div class="user-info">
                  <span class="username">{{ card.username }}</span>
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </section>

    <!-- 合作伙伴 -->
    <section class="partners">
      <div class="partner-logos">
        <div class="partner-logo logo1"></div>
        <div class="partner-logo logo2"></div>
        <div class="partner-logo logo3"></div>
        <div class="partner-logo logo4"></div>
        <div class="partner-logo logo5"></div>
        <div class="partner-logo logo6"></div>
        <div class="partner-logo logo7"></div>
        <div class="partner-logo logo8"></div>
        <div class="partner-logo logo9"></div>
        <div class="partner-logo logo10"></div>
        <div class="partner-logo logo11"></div>
        <div class="partner-logo logo12"></div>
        <div class="partner-logo logo13"></div>
        <div class="partner-logo logo14"></div>
      </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
      <div class="footer-content">
        <div class="footer-links">
          <div class="footer-column">
            <h4>关于我们</h4>
            <ul>
              <li><a href="#">愿景使命</a></li>
              <li><a href="#">企业介绍</a></li>
              <li><a href="#">股东背景</a></li>
              <li><a href="#">发展历程</a></li>
            </ul>
          </div>
          <div class="footer-column">
            <h4>产品介绍</h4>
            <ul>
              <li><a href="#">风控系统</a></li>
              <li><a href="#">数据分析</a></li>
              <li><a href="#">决策引擎</a></li>
            </ul>
          </div>
          <div class="footer-column">
            <h4>应用案例</h4>
            <ul>
              <li><a href="#">银行案例</a></li>
              <li><a href="#">企业案例</a></li>
              <li><a href="#">政府项目</a></li>
            </ul>
          </div>
          <div class="footer-column">
            <h4>联系我们</h4>
            <ul>
              <li><a href="#">公司地址</a></li>
              <li><a href="#">联系方式</a></li>
            </ul>
          </div>
        </div>
        <div class="footer-qrcode">
          <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
            <rect width="100" height="100" fill="white" stroke="#eee" />
            <rect
              x="10"
              y="10"
              width="80"
              height="80"
              fill="none"
              stroke="#ddd"
            />
          </svg>
          <!-- <p>扫码关注公众号</p> -->
        </div>
      </div>
      <div class="footerBox"></div>
      <div class="footer-copyright">
        <p>杭州数融金链科技有限公司©2025 浙ICP备2025180670号</p>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";

// 微信分享功能
onMounted(() => {
  // 检查是否在微信环境中
  const isWechat = /MicroMessenger/i.test(navigator.userAgent);
  if (isWechat) {
    // 这里是模拟的微信分享配置
    // 实际项目中需要调用微信JS-SDK进行配置
    console.log("在微信环境中，可以进行分享配置");

    // 模拟的分享数据
    const shareData = {
      title: "数融金链 - 电商应收账款金融服务平台",
      desc: "科技金融赋能数智化电商金融新生态引领产业升级新范式",
      link: window.location.href,
      imgUrl: "/src/assets/imgs/finance 1.png",
    };

    // 提供分享功能的方法
    window.shareToWechat = () => {
      console.log("分享到微信:", shareData);
      alert("分享功能已触发，请在微信环境中查看效果");
    };
  }
});
const testimonials = ref([
  {
    id: 1,
    cards: [
      {
        id: 1,
        content:
          "这款产品真是数字营销的福音！多平台兼容、个性化定制让我能精准触达目标受众，极大提升了广告转化率。",
        username: "用户A",
      },
      {
        id: 2,
        content:
          "这款产品是我旅行的得力助手！多国语言支持，全球覆盖，为我提供了最准确的导航和周到的建议。",
        username: "用户B",
      },
      {
        id: 3,
        content:
          "这款产品真是前沿科技的代表，创新先导，功能强大。个性化定制让我感觉每个功能都是为我量身打造。",
        username: "用户C",
      },
    ],
  },
  {
    id: 2,
    cards: [
      {
        id: 4,
        content:
          "无处不在的创新体验，让我对未来充满了更多期待。这款产品真是前沿科技的代表。",
        username: "用户D",
      },
      {
        id: 5,
        content:
          "个性化定制让我感觉每个功能都是为我量身打造。无处不在的创新体验。",
        username: "用户E",
      },
      // {
      //   id: 6,
      //   content: '多平台兼容、个性化定制让我能精准触达目标受众，极大提升了广告转化率。',
      //   username: '用户F',
      // },
    ],
  },
]);

// 获取当前可见的卡片（每页显示3个）
const getVisibleCards = (pageId) => {
  const page = testimonials.value.find((item) => item.id === pageId);
  return page ? page.cards.slice(0, 3) : [];
};

// 分享处理函数
const handleShare = () => {
  if (window.shareToWechat) {
    window.shareToWechat();
  } else {
    alert("请在微信环境中使用分享功能");
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: #333;
} */
.app {
  font-family: Source Han Sans CN, Source Han Sans CN;
}
/* 导航栏样式 */
.header {
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}

.logo-text {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 20px;
  color: #000000;
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-links {
  display: flex;
  gap: 30px;
}

.nav-link {
  text-decoration: none;

  transition: color 0.3s;
  font-weight: 500;
  font-size: 16px;
  color: #000000;
}

.nav-link:hover {
  color: #409eff;
}

.contact-btn {
  padding: 8px 20px;
  font-size: 14px;
  height: 32px;
  border-radius: 4px;
}

.login-btn {
  color: #303133;
  margin-right: 12px;
}

.register-btn {
  background-color: #1890ff;
  border-color: #1890ff;
}

.share-btn {
  margin-left: 12px;
  background-color: transparent;
  border-color: #1890ff;
  color: #1890ff;
}

/* 响应式导航栏 */
@media (max-width: 768px) {
  .nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .contact-btn {
    padding: 4px 12px;
    font-size: 12px;
    height: 28px;
  }

  .share-btn {
    display: none; /* 在移动端隐藏分享按钮，可通过其他方式提供分享 */
  }
}


.hero {
  position: relative;
  height: 80vh;
    height: 528px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: 60px;
  
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: local;
  z-index: -1;
  background-image: url("./assets/imgs/Rectangle_1.png");
}

.hero-content {
  text-align: center;
  width: 100%;
  padding: 0 20px;
  position: absolute;
  bottom: 100px;
}

.hero-title {
  margin-bottom: 12px;
  font-weight: bold;
  font-size: 24px;
  color: #000000;
}

.hero-subtitle {
  font-weight: 400;
  font-size: 16px;
  color: #000000;
}

.services {
  padding: 60px 20px ;
  background-color: white;
 
}

.section-title {
  text-align: center;
  margin-bottom: 12px;
  font-weight: 500;
  font-size: 32px;
  color: #000000;
}

.section-title h2 {
  font-size: 36px;
  color: #303133;
  margin-bottom: 20px;
}

.section-title p {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.5);
  max-width: 600px;
  margin: 0 auto;
}

.service-cards {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 30px;
  align-items: stretch;

  height: 300px;
}

.service-card {
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 508px;
  background-image: url("./assets/imgs/Rectangle_6.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: local;
}

.card-header {
  margin-bottom: 150px;
}

.card-header h3 {
  font-size: 18px;
  color: #343a45;
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  gap: 8px; /* 图片和文字之间的间距 */
}

.card-desc {
  font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
  font-weight: normal;
  font-size: 14px;
  color: #1853b5;
}

.service-item {
  display: flex;
  flex-direction: column;
  justify-content: left;
  height: 100%;
  padding-top: 212px;
  padding: 212px 20px 20px;
}
.debris1 {
  background-image: url("./assets/imgs/Rectangle_7.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: local;
}
.debris2 {
  background-image: url("./assets/imgs/Rectangle_8.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: local;
}
.debris3 {
  background-image: url("./assets/imgs/Rectangle_9.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: local;
}
.service-svg {
  width: 24px;
  height: 24px;
  margin-bottom: 2px;
}

.service-item p {
  font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
  font-weight: normal;
  font-size: 16px;
  color: #ffffff;
  text-align: left;
}

/* 三方合作架构样式 */
.cooperation {
  position: relative;
  padding: 40px 20px;
  background-color: #f0f9ff;
  background-image: url("./assets/imgs/Group_10.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: local;
  min-height: 480px;
}
.cooperation-role-container {
  display: flex;
  height: 330px;
  width: 100%;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.left-panel {
  width: 230px;
  background-color: #f5f7fa;
  border-right: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  padding: 24px;
}

.title-section {
  padding: 10px 20px;
  border-bottom: 1px solid #e0e0e0;
  background-color: #1976d2;
  font-size: 14px;
  color: #ffffff;
}

.title-section div {
  margin: 0;
  font-size: 18px;
}
.tabBox {
  border-left: 3px solid #4284f3;
}
.menu-section {
  flex: 1;
  padding: 16px 0;
}

.menu-item {
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  color: #1853b5;
}

.menu-item:hover {
  background-color: #e6f7ff;
  color: #1976d2;
}

.right-panel {
  flex: 1;
  padding: 20px;
  background-color: white;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.content-row {
  display: flex;
  border-bottom: 1px solid #e0e0e0;
}

.content-row:last-child {
  border-bottom: none;
}

.content-cell {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.category-cell {
  width: 120px;
  flex-shrink: 0;

  font-weight: 500;
}

.category-cell span {
  color: #1853b5;
  font-size: 14px;
}

.role-cell {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.role-icon {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #f0f2f5;
}

.bank-icon {
  background-image: url("./assets/imgs/bank-line.png");
}

.platform-icon {
  background-image: url("./assets/imgs/team-line.png");
}

.merchant-icon {
  background-image: url("./assets/imgs/building-line.png");
}

.role-cell span {
  color: #303133;
  font-size: 14px;
}

.content-cell p {
  margin: 4px 0;
  color: #343a45;
}
.coop-content {
  max-width: 1200px;
  margin: 0 auto;
}

.coop-title {
  text-align: center;
  font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
  font-size: 24px;
  color: #ffffff;
  margin-bottom: 16px;
  font-weight: 500;
}

.sub-title {
  font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
  text-align: center;
  font-size: 14px;
  color: #ffffff;
  margin-bottom: 30px;
}

.system-body {
  padding: 30px;
}

.system-tabs {
  display: flex;
  margin-bottom: 25px;
  border-bottom: 2px solid #e6f7ff;
}

.tab-item {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  color: #606266;
  margin-right: 30px;
  border-bottom: 3px solid transparent;
  transition: all 0.3s;
}

.tab-item.active {
  color: #1890ff;
  border-bottom-color: #1890ff;
  font-weight: 500;
}

.tab-item:hover {
  color: #409eff;
}

.partner-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.partner-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #f0f9ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  font-size: 28px;
}

.partner-title {
  font-size: 18px;
  font-weight: 500;
  color: #303133;
}

.partner-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

.detail-item {
  width: 100%;
}

.detail-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
  text-align: left;
  font-weight: 500;
}

.detail-content {
  font-size: 16px;
  color: #303133;
  line-height: 1.8;
  text-align: left;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .system-tabs {
    flex-wrap: wrap;
  }

  .tab-item {
    margin-right: 15px;
    margin-bottom: 10px;
  }
}

/* 案例数据样式 */
.cases {
  padding: 60px 20px 0;
}

.stats-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
}

.stat-item {
  padding: 10px;
  text-align: center;
  width: 264px;
  height: 136px;

  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0px 24px 30px 0px rgba(25, 66, 134, 0.08),
    inset 2px 2px 2px 0px #ffffff,
    inset -2px -2px 4px 0px rgba(219, 219, 219, 0.25);
  border-radius: 8px 8px 8px 8px;
  margin-right: 14px;
}

.stat-number {
  font-weight: 500;
  font-size: 48px;
  color: #4284f3;
  margin-bottom: 10px;
}
.small {
  font-size: 16px;
}
.stat-label {
  font-weight: 400;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.5);
}

.world-map {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  padding: 0 20px;
  height: 563px;
  background-image: url("./assets/imgs/image_1.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: local;
  margin-top: -90px;
}

/* 客户评价样式 */
.testimonials {
  padding: 20px 20px;
  background-color: #f8f9fa;
  margin: 2px 0;
}

.testimonial-cards {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
}

.testimonial-card {
  background-color: white;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  position: relative;
}

.testimonial-card::before {
  content: '""';
  font-size: 60px;
  color: #409eff;
  opacity: 0.1;
  position: absolute;
  top: 20px;
  left: 20px;
}

.testimonial-text {
  font-size: 16px;
  line-height: 1.8;
  color: #606266;
  margin-bottom: 20px;
  padding-left: 20px;
  position: relative;
}

.testimonial-author {
  font-size: 14px;
  color: #909399;
  text-align: right;
}

/* 合作伙伴样式 */
.partners {
  padding: 10px 20px;
  background-color: white;
}

.partner-logos {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 30px;
  align-items: center;
  justify-items: center;
}

.partner-logo {
  width: 140px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;

  color: #606266;

  transition: all 0.3s;

  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0px 24px 30px 0px rgba(25, 66, 134, 0.08);
  border-radius: 8px 8px 8px 8px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: local;
}
.logo1 {
  background-image: url("./assets/imgs/1.png");
}
.logo2 {
  background-image: url("./assets/imgs/2.png");
}

.logo3 {
  background-image: url("./assets/imgs/3.png");
}
.logo4 {
  background-image: url("./assets/imgs/4.png");
}

.logo5 {
  background-image: url("./assets/imgs/5.png");
}

.logo6 {
  background-image: url("./assets/imgs/6.png");
}
.logo7 {
  background-image: url("./assets/imgs/7.png");
}
.logo8 {
  background-image: url("./assets/imgs/8.png");
}
.logo9 {
  background-image: url("./assets/imgs/9.png");
}

.logo10 {
  background-image: url("./assets/imgs/10.png");
}
.logo11 {
  background-image: url("./assets/imgs/11.png");
}
.logo12 {
  background-image: url("./assets/imgs/12.png");
}
.logo13 {
  background-image: url("./assets/imgs/13.png");
}
.logo14 {
  background-image: url("./assets/imgs/14.png");
}
.partner-logo:hover {
  background-color: #ecf5ff;
  color: #409eff;
  transform: translateY(-2px);
}

.footer {
  background: #dae8f2;
  color: #909399;
  padding: 20px 0 20px;
  margin-top: 20px;
  color: #000000;
}
.footerBox {
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #c9c9c9;
  width: 100%;
}
.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-links {
  display: flex;
  gap: 60px;
  flex-wrap: wrap;
}

.footer-column h4 {
  font-weight: 400;
  font-size: 20px;
  color: #000000;
  margin-bottom: 16px;
}

.footer-column ul {
  list-style: none;
}

.footer-column li {
  margin-bottom: 12px;
}

.footer-column a {
  color: #909399;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s;
}

.footer-column a:hover {
  color: #409eff;
}

.footer-qrcode {
  text-align: center;
}

.footer-qrcode p {
  margin-top: 10px;
  font-size: 14px;
}

.footer-copyright {
  max-width: 1200px;
  margin: 16px auto 0;
  padding-top: 2px;
  text-align: center;
  font-weight: 400;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .nav-links {
    display: none;
  }

  .hero-title {
    font-size: 36px;
  }

  .service-cards {
    grid-template-columns: 1fr;
  }

  .system-body {
    flex-direction: column;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .testimonial-cards {
    grid-template-columns: 1fr;
  }

  .partner-logos {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-content {
    flex-direction: column;
  }

  .footer-links {
    gap: 30px;
  }
}

@media (max-width: 480px) {
  .hero {
    height: 60vh;
  }

  .hero-title {
    font-size: 28px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .partner-logos {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 轮播图 */

.testimonials-section {
  padding: 20px 20px;
  background: #f8f9fa;
  max-width: 1200px;
  margin: 0 auto;
}

.custom-carousel {
  max-width: 1200px;
  margin: 0 auto;
}

.cards-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 0 40px;
}

.testimonial-card {
  width: 362px;
  height: 150px;
  background: linear-gradient(
    180deg,
    rgba(198, 217, 249, 0.5) 0%,
    #ffffff 100%
  );
  box-shadow: inset 2px 2px 2px 0px #ffffff,
    inset -2px -2px 4px 0px rgba(219, 219, 219, 0.25),
    0px 24px 30px 0px rgba(25, 66, 134, 0.08);
  border-radius: 8px 8px 8px 8px;
  padding: 20px;
  position: relative;
  border: 1px solid rgba(240, 240, 240, 0.8);
  /* background-image: url("./assets/imgs/Group_11.png");
 background-repeat: no-repeat;
  background-attachment: local;
  background-size: contain;
  background-position: left; */
}

.quote-icon {
  position: absolute;
  top: 15px;
  left: 20px;
  font-size: 48px;
  color: rgba(24, 144, 255, 0.2);
  font-family: serif;
  font-weight: bold;
  line-height: 1;
}

.content {
  font-size: 12px;
  line-height: 1.6;
  color: #333;
  margin: 30px 0 15px 0;
  text-align: justify;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-left: 30px;
}

.user-info {
  text-align: right;
}

.username {
  font-size: 11px;
  color: #666;
  font-weight: 500;
}

:deep(.el-carousel) {
  overflow: visible;
}

:deep(.el-carousel__container) {
  height: 180px !important;
}

:deep(.el-carousel__arrow) {
  width: 36px;
  height: 36px;
  background: white;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  top: 36% !important;
  position: absolute;
}

:deep(.el-carousel__arrow:hover) {
  background: #f5f7fa;
}

:deep(.el-carousel__arrow--left) {
  left: -18px;
}

:deep(.el-carousel__arrow--right) {
  right: -18px;
}

:deep(.el-carousel__arrow) {
  top: 38% !important;
}

:deep(.el-carousel__indicator.is-active .el-carousel__button) {
  background: #1890ff;
  display: none !important;
}
:deep(.el-carousel__button) {
  display: none;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .testimonials-section {
    padding: 40px 16px;
  }

  .cards-container {
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 0;
  }

  .testimonial-card {
    width: 100%;
    max-width: 362px;
  }

  :deep(.el-carousel__arrow--left) {
    left: 0;
  }

  :deep(.el-carousel__arrow--right) {
    right: 0;
  }
}

/* 修复指示器隐藏问题 */
:deep(.el-carousel__indicators) {
  margin-top: 20px;
  display: none !important; /* 强制隐藏指示器 */
  visibility: hidden !important;
  opacity: 0 !important;
}

/* 修复箭头居中问题 */
:deep(.el-carousel__arrow--left) {
  left: 0 !important; /* 左箭头紧贴左侧 */
  transform: translateX(-100%); /* 向左偏移自身宽度 */
}

:deep(.el-carousel__arrow--right) {
  right: 0 !important; /* 右箭头紧贴右侧 */
  transform: translateX(100%); /* 向右偏移自身宽度 */
}

/* 确保箭头在轮播图容器内正确显示 */
.custom-carousel {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 60px; /* 为箭头留出空间 */
}

/* 修复箭头悬停效果 */
:deep(.el-carousel__arrow:hover) {
  background: #f5f7fa !important;
  transform: translateX(var(--offset)) scale(1.1) !important;
}

:deep(.el-carousel__arrow--left:hover) {
  --offset: -100%;
}

:deep(.el-carousel__arrow--right:hover) {
  --offset: 100%;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .testimonials-section {
    padding: 40px 16px;
  }

  .custom-carousel {
    padding: 0 50px;
  }

  .cards-container {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }

  .testimonial-card {
    width: 100%;
    max-width: 362px;
  }

  :deep(.el-carousel__arrow--left) {
    left: 20px !important;
  }

  :deep(.el-carousel__arrow--right) {
    right: 20px !important;
  }
}

::v-deep .el-carousel__indicators--horizontal {
  display: none !important;
}
</style>
